<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>墨阅-超级管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:href="@{/moyue/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/moyue/css/face.css}"  rel="stylesheet">
    <link th:href="@{/moyue/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
</head>
<body id="allBody">
<div class="top">
    墨阅--超级管理
    <i class="fa fa-navicon" style="color:#f7f7f7;font-size:10px;padding-left: 50px"></i>
</div>
<div class="fixed">
    <div class="broad">
        <ul>
            <li class="broad-item">
                <a><span>管理员管理</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
        </ul>
    </div>
    <div class="fixed-iframe">
        <!--<iframe id="iframeto" th:src="@{errvgtrehb}"  name="myFrameName" frameborder="0"></iframe>-->
        <div class="top-face">
            <div class="header">管理员管理</div>
            <div class="table-face">
                <div class="table-mg">
                    <div class="mg-delete">
                        <!--<input type="checkbox" id="allcheck">
                        <button class="mg-delete-quan">全选</button>-->
                        <input class="mg-delete-quan" type="button" value="全选" onclick="selectAll();"/>
                        <input class="mg-delete-quan" type="button" value="全不选" onclick="SelectNO();"/>
                        <button class="mg-delete-button" onclick="batchdel()">批量删除</button>
                    </div>
                    <!--<div class="mg-add">-->
                    <!--<button type="button" class="mg-add-button">+&nbsp;新增</button>-->
                    <!--</div>-->
                    <form class="mg-shou" method="post" th:action="@{/moyue/admin/user/search}">
                        <div class="mg-shou-input">
                            <input class="shou-input-in" name="userName">
                            <input type="submit" class="shou-input-sh">搜索</input>
                        </div>
                    </form>
                </div>
                <div class="table-bet">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th class="td1"></th>
                            <th>用户昵称</th>
                            <th>用户性别</th>
                            <th>用户角色</th>
                            <th colspan="3">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="users :${userlist}">
                            <input type="hidden" th:value="${users.userRewards}">
                            <td class="td1"><input type="checkbox" th:value="${users.userId}" name="user-count" class="count"></td>
                            <td class="tds2" th:text="${users.userName}"></td>
                            <td class="tds3" th:text="${users.userSex}"></td>
                            <td class="tds4" th:if="${users.roleId}==1">普通用户</td>
                            <td class="tds4" th:if="${users.roleId}==2">初级vip</td>
                            <td class="tds4" th:if="${users.roleId}==3">高级vip</td>
                            <td>
                                <a class="bet-check" onclick="aa()">查看</a>
                            </td>
                            <td>
                                <a  class="bet-edit">编辑</a>
                            </td>
                            <td>
                                <a href="#" class="bet-delete">删除</a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <div class="page"></div>
                <input type="hidden" th:value="${page}" class="pagenum" >
            </div>
        </div>
        <div class="editor">
            <i class="iconfont sontype-x" >&#xe62c;</i>
            <form action="" method="post">
                <dl>
                    <dt>用户账号:</dt>
                    <dd><input class="edited-1" type="" name=""value="" /></dd>
                </dl>
                <dl>
                    <dt>用户性别:</dt>
                    <dd><input class="edited-2" type="" name=""  value="" /></dd>
                </dl>
                <dl>
                    <dt>用户虚拟币:</dt>
                    <dd><input class="edited-3" type="" name=""  value="" /></dd>
                </dl>
                <dl>
                    <dt>用户角色</dt>
                    <dd><input class="edited-4" type="" name=""  value="" /></dd>
                </dl>
                <input type="hidden" class="edited-5">
                <input class="sub" type="button" value="确定" onclick="edited()"/>
            </form>
        </div>
    </div>
    <input type="hidden" th:value="${totalPages}" class="userpage">
</div>
<div class="bgback none"></div>
</body>
<script  th:src="@{/moyue/js/jquery-3.3.1.min.js}"></script>
<script  th:src="@{/moyue/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/face.js}"></script>
<script th:inline="javascript">
    $('.bet-edit').on('click',function () {
        $('.editor').fadeIn();
        $('.bgback').addClass('block').removeClass('none');
        var parent = $(this).parent().parent();
        $('.edited-1').val(parent.children('td.tds2').text());
        $('.edited-2').val(parent.children('td.tds3').text());
        $('.edited-3').val(parent.children("input").val());
        $('.edited-4').val(parent.children('td.tds4').text());
        $('.edited-5').val(parent.children('td.td1').children('input').val());
    })
    $('.bet-delete').on('click',function () {
        var parent = $(this).parent().parent();
        var userids = parent.children("td.td1").children("input").val();
        $.ajax({
            type: "Delete",//数据发送的方式（post 或者 get）
            url: "/moyue/admin/user/"+ userids,//要发送的后台地址
            data: {
                userId : userids  ,
            },//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
            dataType:"JSON",
            success: function (data) {//ajax请求成功后触发的方法
                if(data.code==0){
                    alert('删除成功');
                    location.reload();
                }else {

                }
            },
            error: function (msg) {//ajax请求失败后触发的方法
                alert("网络错误");//弹出错误信息
            }
        })
    })
    $('.sontype-x').click(function(){
        $('.editor').fadeOut();
        $('.bgback').addClass('none').removeClass('block');
    });
    //分页
    var containers;var counts;var pageindexs;var inx;
    //container 容器，count 总页数  pageindex 当前页数
    function setPage(container, count, pageindex) {
        containers = container;
        counts = count;
        pageindexs = pageindex;
        var a = [];

        //总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
        // if (pageindexs == 1) {
        //     a[a.length] = "<a href=\"#\" class=\"prev unclick\">上一页</a>";
        // } else {
        //     a[a.length] = "<a href=\"#\" class=\"prev\">上一页</a>";
        // }
        function setPageList() {
            if (pageindexs == i) {
                a[a.length] = "<a href=\""+"/moyue/admin/bms?page="+i +"\""+   "class=\"on\">" + i + "</a>";
            } else {
                a[a.length] = "<a href=\""+"/moyue/admin/bms?page="+i +"\""+   "class=\"on\">" + i + "</a>";
            }
        }
        //总页数小于10
        if (counts <= 10) {
            for (var i = 1; i <= counts; i++) {
                setPageList();
            }
        }
        //总页数大于10页
        else {
            if (pageindexs <= 4) {
                for (var i = 1; i <= 5; i++) {
                    setPageList();
                }
                a[a.length] = "...<a href=\"#\">" + counts + "</a>";
            } else if (pageindex >= count - 3) {
                a[a.length] = "<a href=\"#\">1</a>...";
                for (var i = counts - 4; i <= counts; i++) {
                    setPageList();
                }
            }
            else { //当前页在中间部分
                a[a.length] = "<a href=\"#\">1</a>...";
                for (var i = pageindexs - 2; i <= pageindexs + 2; i++) {
                    setPageList();
                }
                a[a.length] = "...<a href=\"#\">" + count + "</a>";
            }
        }
        // if (pageindexs == counts) {
        //     a[a.length] = "<a href=\"#\" class=\"next unclick\">下一页</a>";
        // } else {
        //     console.log(pageindexs);
        //     pageindexs++;
        //     a[a.length] = "<a href=\""+"/moyue/admin/bms?page="+ pageindexs+"\""+   "class=\"next\">" + "下一页" + "</a>";
        // }
        containers.innerHTML = a.join("");
        //事件点击
        var pageClick = function() {
            var oAlink = containers.getElementsByTagName("a");
            inx = pageindexs; //初始的页码

            // oAlink[0].onclick = function() { //点击上一页
            //     if (inx == 1) {
            //         return false;
            //     }
            //     setPage(containers, counts, inx);
            //     return false;
            // }
            for (var i = 1; i < oAlink.length - 1; i++) { //点击页码
                oAlink[i].onclick = function() {
                    inx = parseInt(this.innerHTML);
                }
            }
            setPage(containers, counts, inx);
            // oAlink[oAlink.length - 1].onclick = function() { //点击下一页
            //     if (inx == counts) {
            //         return false;
            //     }
            // inx++;
            // $.ajax({
            //     type: "POST",//数据发送的方式（post 或者 get）
            //     url: "/moyue/admin/userPage",//要发送的后台地址
            //     data: {
            //         page:inx,
            //     },//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
            //     dataType:"JSON",
            //     success: function (data) {//ajax请求成功后触发的方法
            //         if(data.code==0){
            //             location.reload();
            //         }else {
            //
            //         }
            //     },
            //     error: function (msg) {//ajax请求失败后触发的方法
            //         alert("网络错误");//弹出错误信息
            //     }
            // });
            setPage(containers, counts, inx);
            return false;
        }
    }

    $(document).ready(function(){
        var pageas = $('.page').children();
        for (let a = 0; a < (parseInt(pageas.length)); a++) {
            $(pageas[a]).removeClass("on");
        }
        var pagen=parseInt($('.pagenum').val());
        console.log(pagen);
        console.log($('.pagenum').val());
        $(pageas[(pagen)-1]).addClass("on");
    })
    setPage(document.getElementsByClassName("page")[0],$('.userpage').val(),1);
</script>
</html>